<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>题库</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/style/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/panel.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/window.css">
<script type="text/javascript" src="<%=path %>/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/script/dateFormat.js"></script>
<script type="text/javascript" src="<%=path %>/script/datagrid-bufferview.js"></script>
<script type="text/javascript" src="<%=path %>/script/common.js"></script>

<style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:17px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:230px;
        }
</style>
</head>
<body>
<table id="tt" title="题库" style="width:auto;height:800px">
	</table>
	
	<div id="toolbar" style="padding:5px;height:auto">
        <div>
         
         <!-- 搜索条件开始 -->	
		              类型：<select id="squestionType"  name="questionType" class="easyui-combobox" panelHeight="auto" style="width:auto" data-options="editable:false "> 
		               <!--  <option value="" selected="selected">全部</option> -->
		                <option value="0" selected="selected">口语</option>
		                <!-- <option value="1">写作</option> -->
		                
		            </select>&nbsp;&nbsp;
		    ID：<input id="sid"  name="id" type="text" class="easyui-numberbox" style="width:80px">&nbsp;&nbsp;
		            题号：<input id="sqnum"  name="qnum" type="text" class="easyui-textbox" style="width:80px">&nbsp;&nbsp;
		            题目：<input id="scontent"  name="content" type="text" class="easyui-textbox" style="width:200px">&nbsp;&nbsp;
		            标签：<input id="stagText"  name="tagText" type="text" class="easyui-textbox" style="width:100px">&nbsp;&nbsp;
         <!-- 搜索条件结束 -->	
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="newQbank()">添加</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-edit" onclick="editQbank()">修改</a>&nbsp;&nbsp;
            <!-- 
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteQbank()">删除</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="checkSource()">查看资源文件</a>&nbsp;&nbsp;
            <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="checkViews()">查看观点</a>&nbsp;&nbsp;
             -->
        </div>
    </div>
     
    
    <!-- 添加/编辑框 开始-->
	<div id="dlg" class="easyui-dialog"
		style="width: 800px; height: 650px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">题库信息</div>
		<form id="fm" method="post"  validate>
		    <input type="hidden" name="qid" id="qid" />
		    
		    <div class="fitem">
				<label>类型:</label>  
			    <select id="qtype" name="questionType" class="easyui-combobox" panelHeight="auto" style="width:auto" data-options="editable:false " > 
	                <option value="口语" selected="selected">口语</option>
	                <!-- <option value="写作">写作</option> -->
	                
	            </select>
			</div>
		    
			<div class="fitem">
				<label>题号:</label>  
			    <input  class="easyui-textbox" name="questionNum" id="questionNum"   required /><span id="errtip"></span>  
			</div>
			
			<div class="fitem">
				<label>题目:</label> 
				<textarea style="overflow-y:visible;border:1;width:70%;height:60px;" name="content"></textarea> 
			</div>
			<div class="fitem">
				<label>标签:</label>
				<input  class="easyui-textbox" name="qtags" id="qtags" value=""   />  
			</div>
			<div class="fitem">
				<label>中文翻译:</label> 
				<textarea style="overflow-y:visible;border:1;width:70%;height:60px;" name="translation" ></textarea> 
			</div>
			<!-- 
			<div class="fitem">
				<label>教师点评:</label> 
				<textarea style="overflow-y:visible;border:1;width:70%;height:60px;" name="review" ></textarea> 
			</div>
			
			<div class="fitem" style="border:dotted 1px;width: 563px;">
				<div style="margin-top:10px;">
				     <div style="float: left;width: 80px;">视频地址:</div> 
				     <div  style="float: left;">
				       <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="addResources('videoDiv','videoUrl','','videoIndex','','视频')">新增</a>
				     </div> 
				</div>
				<br/><br/>
				<div id="videoDiv">
				</div>
			</div>
			
			<div class="fitem" style="border:dotted 1px;width: 563px;">
				<div style="margin-top:10px;">
				     <div style="float: left;width: 80px;">sample例子:</div> 
				     <div  style="float: left;">
				       <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="addResources('sampleDiv','sample','','sampleIndex','','sample')">新增</a>
				     </div> 
				</div>
				<br/><br/>
				<div id="sampleDiv">
				</div>
			</div>
			
			<div class="fitem" style="border:dotted 1px;width: 563px;" id="faudioDiv">
				<div style="margin-top:10px;">
				     <div style="float: left;width: 80px;">音频地址:</div> 
				     <div  style="float: left;">
				       <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="addResources('audioDiv','audioUrl','','audioIndex','','音频')">新增</a>
				     </div> 
				</div>
				<br/><br/>
				<div id="audioDiv">
				</div>
			</div>
			
			<div class="fitem" style="border:dotted 1px;width: 563px;" id="fkeyDiv">
				<div style="margin-top:10px;">
				     <div style="float: left;width: 80px;">关键词:</div> 
				     <div  style="float: left;">
				       <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="addKeywords('keywordDiv','','')">新增</a>
				     </div> 
				</div>
				<br/><br/>
				<div id="keywordDiv">
				</div>
			</div>
			
			
			<div class="fitem" style="border:dotted 1px;width: 563px;" id="fviewDiv">
				<div style="margin-top:10px;">
				     <div style="float: left;width: 80px;">论据:</div> 
				     <div  style="float: left;">
				       <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="addlj('viewDiv',0,'')">新增</a>
				     </div> 
				</div>
				<br/><br/>
				<div id="viewDiv">
				     
				</div>
			</div>
			 -->
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6"
			iconCls="icon-ok" onclick="saveOrUpdateQBank()" style="width: 90px">Save</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="closeDialog()"
			style="width: 90px">Cancel</a>
	</div>
	 <!-- 添加/编辑框结束-->
	 
</body>
<script type="text/javascript">
$.ajaxSetup({cache:false});
$(function(){
	$('#tt').datagrid({
		url:'<%=basePath %>test/experience/list?questionType=0',
		method:'get',
		singleSelect:true,toolbar:'#toolbar',remoteSort:false,pageSize:50,nowrap:false,
		pagination:true,fitColumns:true,
	    columns:[[
	              {field:'id',title:'ID',sortable:true,width:50},
	        {field:'questionNum',title:'题号',sortable:true,width:80},
	        {field:'content',title:'题目',sortable:true,width:400},
	        {field:'tags',title:'标签',sortable:true,width:100,
	        	formatter: function(value,row,index){
	        		var str="" ;
	        		for(var i in row.tags){
	        			str = str+row.tags[i].tagText+"/";
	        		}
	        		return str;
	        	} 
	        },
	        {field:'createTime',title:'创建时间',sortable:true,width:100,formatter:Common.DateFormatterTime,sorter:Common.DateSorter } ,
	        {field:'updateTime',title:'最后更新时间',sortable:true,width:100,formatter:Common.DateFormatterTime,sorter:Common.DateSorter } 
	    ]]
	});
	
});

	function searchData(){
		var id = $("#sid").textbox('getValue') ;
		var questionType = $("#squestionType").combobox("getValue");
		var qnum = $("#sqnum").textbox('getValue');
		var content = $("#scontent").textbox("getValue");
		var tagText = $("#stagText").textbox("getValue") ;
		$('#tt').datagrid({
			url:'<%=basePath %>test/experience/list?qnum='+qnum+'&questionType='+questionType+'&content='+content+'&tagText='+tagText+'&id='+id,
			method:'get',
			onLoadSuccess:function(data){
				if(data.total==0){
					$.messager.alert('提示','没有查询到任何符合条件的数据');
				}
			}
		});
	}
	
	function deleteQbank(){
		
		var row = $('#tt').datagrid('getSelected');
		if (row){
            $.messager.confirm('提示','确定要删除这道题吗？',function(r){
                if (r){
                    $.post('<%=basePath%>question/deleteData',{q_id:row.id},function(result){
                        $('#tt').datagrid('reload');    // reload the user data
                    },'json');
                }
            });
   		}
	}
	 
	
	//-------------------------------------------------
	//关闭弹出框
	function closeDialog(){
		 $('#dlg').dialog('close') ;
	}
	
	//添加资源
	function addResources(divId,fieldName,val,indexFieldName,indexVal,type){
		
		var _div = "<div style='margin-left:85px;margin-top:3px;margin-bottom:13px;width:469px;'>"+
				   "	  <div style='float:left;margin-top:19px;margin-right:20px;'>"+type+"<input type='text' name='"+indexFieldName+"' value='"+indexVal+"' temp='rindex' style='width:34px;' /></div>"+
				   "      <div>"+
				    "       <textarea style='overflow-y:visible;border:1;width:70%;height:60px;' name='"+fieldName+"'  >"+val+"</textarea>"+
					"	    <a href='#' onclick='delresource(this)'>删除</a> "+
					"     </div>"+
	               "</div>" ;
	               
	    $("#"+divId).append(_div) ;
	}
	//删除资源
	function delresource(obj){
		$(obj).parent().parent().remove();
	}
	
	//添加关键词
	function addKeywords(divId,kname,audiourl){
		var _div = "<div style='margin-left:85px;margin-top:3px;margin-bottom:13px;width:469px;'>"+
				   "   <input type='text' name='kname' style='width: 138px;' value='"+kname+"' placeholder='关键词' />"+
				   "   - "+
				    "  <input type='text' name='audiourl' value='"+audiourl+"' placeholder='音频地址' />"+
					"	<a href='#' onclick='delKeyword(this)'>删除</a> "+
				   "</div>" ;
		 $("#"+divId).append(_div) ;
	}
	//删除关键词
	function delKeyword(obj){
		$(obj).parent().remove();
	}
	//添加论据
	function addlj(divId,viewType,ljValue){
		/*
		var _div = $("<div name='ljdiv'> ") ;
		var _agree = "   <div style='margin-left:85px;margin-top:3px;margin-bottom:13px;width:469px;'> "+
					"  	  <div style='float:left;margin-top:19px;margin-right:20px;'>同意<input type='text' name='agreeIndex' value='"+agreeIndex+"' temp='rindex' style='width:34px;' /></div>  "+
					"        <div>  "+
					"          <textarea style='overflow-y:visible;border:1;width:70%;height:60px;' name='agree'  >"+agreeValue+"</textarea>  "+
					"	 	    <a href='#' onclick='delView(this)'>删除</a>   "+
					"	      </div>  "+
					"      </div> " ;
	
	 	var _neutral = " <div style='margin-left:85px;margin-top:3px;margin-bottom:13px;width:469px;'>  "+
					"	    	  <div style='float:left;margin-top:19px;margin-right:20px;'>中立<input type='text' name='neutralIndex' value='"+neutralIndex+"' temp='rindex' style='width:34px;' /></div>  "+
					"	          <div>  "+
					"	            <textarea style='overflow-y:visible;border:1;width:70%;height:60px;' name='neutral'  >"+neutralVal+"</textarea>  "+
					"		 	    <a href='#' onclick='delView(this)'>删除</a>   "+
					"		      </div>  "+
					"      </div> " ;
		
		var _disagree = " <div style='margin-left:85px;margin-top:3px;margin-bottom:13px;width:469px;'>  "+
					"	    	  <div style='float:left;margin-top:19px;margin-right:20px;'>反对<input type='text' name='disagreeIndex' value='"+disagreeIndex+"' temp='rindex' style='width:34px;' /></div>  "+
					"	          <div>  "+
					"	            <textarea style='overflow-y:visible;border:1;width:70%;height:60px;' name='disagree'  >"+disagreeValue+"</textarea>  "+
					"		 	    <a href='#' onclick='delView(this)'>删除</a>   "+
					"		      </div>  "+
					"      </div> " ;
		if(viewType==0){
			_div.append(_agree) ;
		}else if(viewType==1){
			_div.append(_neutral) ;
		}else if(viewType==2){
			_div.append(_disagree) ;
		}else{
			_div.append(_agree).append(_neutral).append(_disagree) ;
		}
		*/
		 var _ljsel = $("<select onchange='changeLjType("+viewType+",this.value,this,\""+ljValue+"\");'></select>");
		 var _op = "<option value='0' selected>同意</option><option value='1'>中立</option><option value='2'>不同意</option>" ;
		 _ljsel.append(_op) ;
	     _ljsel.children().eq(viewType).attr('selected','selected') ;
	    
	     var _div = $("<div name='ljdiv'> ") ;
		    
	    var fieldName = getFieldNameByViewType(viewType); 
		var _ljDiv = $("   <div style='margin-left:85px;margin-top:3px;margin-bottom:13px;width:469px;'> ");
		
		var _subdiv1 = $("  	  <div style='float:left;margin-top:19px;margin-right:20px;'></div>  ");
		
		var _subdiv2 ="      <div>  "+
					"          <textarea style='overflow-y:visible;border:1;width:70%;height:60px;' name='"+fieldName+"'  >"+ljValue+"</textarea>  "+
					"	 	    <a href='#' onclick='delView(this)'>删除</a>   "+
					"	      </div>  " ;
					 
	    _subdiv1.append(_ljsel) ;
		_ljDiv.append(_subdiv1).append(_subdiv2) ;
        _div.append(_ljDiv) ;					 
		$("#"+divId).append(_div) ;
	}
	
	function ljshow(viewType,ljValue,obj){
		
		    var _div = $(obj).parent().parent() ;
		    //先删除原来了
		    _div.children().eq(1).remove();
		    //再显示新的
		    var fieldName = getFieldNameByViewType(viewType); 
			 
			var _subdiv2 ="      <div>  "+
						"          <textarea style='overflow-y:visible;border:1;width:70%;height:60px;' name='"+fieldName+"'  >"+ljValue+"</textarea>  "+
						"	 	    <a href='#' onclick='delView(this)'>删除</a>   "+
						"	      </div>  " ;
						 
	        _div.append(_subdiv2) ;					 
	}
	
	//删除观点
	function delView(obj){
		$(obj).parent().parent().remove();
	}
	//改变论据选择类型 -- 同意，中立，不同意
	function changeLjType(oldViewType,viewType,obj,ljValue){
		if(oldViewType==viewType){
			ljshow(viewType,ljValue,obj);
		}else{
			ljshow(viewType,'',obj);
		}
	}
	//获取论据字段的名称
	function getFieldNameByViewType(viewType){
		return viewType==0?'agree':(viewType==1?'neutral':'disagree'); 
	}
	
	//切换题的类型
	function changeType(type){
		 
		if(type==0){
			//口语
			$("#faudioDiv").css('display','block') ;
			$("#fkeyDiv").css('display','block') ;
			$("#fviewDiv").css('display','none');
		}else if(type==1){
			//写作
		    $("#faudioDiv").css('display','none') ;
			$("#fkeyDiv").css('display','none') ;
			$("#fviewDiv").css('display','block');
		}
	}
	
	
	
	var url = '' ;
	//默认选中类型：口语
	function defaultType(type){
		changeType(type);
		
		$('#qtype').combobox({
			onSelect: function(record){
				 if("口语"==record.text){
					 changeType(0) ;
				 }else if("写作"==record.text){
					 changeType(1) ;
				 }
			}
		});
		$('#qtype').combobox('setValue',type==0?'口语':'写作');
	}
	
	//添加题库
	function newQbank(){
	/**
		 $("#videoDiv").empty();
		 $("#sampleDiv").empty();
		 $("#audioDiv").empty();
		 $("#keywordDiv").empty();
		 $("#viewDiv").empty();
		 **/
		 $('#dlg').dialog('open').dialog('setTitle','添加题库');
		 $('#fm').form('clear');
		 defaultType(0);
		 $("#questionNum").parent().find('span .textbox-text').removeAttr('readonly') ;
		 url = '<%=basePath%>test/experience/save';
		 
		 //绑定题号验证
		 $("#questionNum").parent().find("span .textbox-text").bind('keyup',function(){
			    var qnum = $(this).val();
				if(qnum.length>0){
					checkQnumIsExist(qnum) ;
				}
		 });
	}
	
	//编辑题库
	function editQbank(){
		 var row = $('#tt').datagrid('getSelected');
		 if (row){
			 delete  row.qtags ;
			 $("#qid").val(row.id) ;
			 $("#questionNum").parent().find('span .textbox-text').attr('readonly',true) ;
			  /**
			 $("#videoDiv").empty();
			 $("#sampleDiv").empty();
			 $("#audioDiv").empty();
			 $("#keywordDiv").empty();
			 $("#viewDiv").empty();
			
			 //显示资源
			 for(var i=0 ;i<row.videos.length;i++){
				 var video = row.videos[i]  ;
					 addResources('videoDiv','videoUrl',video.videoUrl,'videoIndex',video.videoIndex,'视频') ;
			 }
			 for(var i=0 ;i<row.samples.length;i++){
				 var sample = row.samples[i] ;
					 addResources('sampleDiv','sample',sample.sample,'sampleIndex',sample.sampleIndex,'sample') ;
			 }
			 for(var i=0 ;i<row.audios.length ;i++){
				 var audio = row.audios[i] ;
					 addResources('audioDiv','audioUrl',audio.audioUrl,'audioIndex',audio.audioIndex,'音频') ;
			 }
			 
			 //显示关键词
			 for(var i=0 ;i<row.keywordAudios.length ;i++){
				 var keywordAudio = row.keywordAudios[i]  ;
				 addKeywords('keywordDiv',keywordAudio.kName,keywordAudio.audioUrl) ;
			 }
			 
			 //显示论据
			 for(var i=0 ;i<row.views.length ;i++){
				 var view = row.views[i] ;
				 if(view.viewType==0){
					 addlj('viewDiv',0,view.viewText) ;
				 }else if(view.viewType==1){
					 addlj('viewDiv',1,view.viewText) ;
				 }else if(view.viewType==2){
					 addlj('viewDiv',2,view.viewText) ;
				 }
			 }
			**/
			 //tag
			 var tags = '' ;
			 $.each(row.tags,function(){
				tags += $(this).get(0).tagText + '/' ;
			 }) ;
			 if(tags.length>0){
				 tags = tags.substring(0,tags.length-1) ;
			 }
			 row.qtags = tags ;
			 $('#dlg').dialog('open').dialog('setTitle','编辑题库');
			 $('#fm').form('load',row);
			 url = '<%=basePath%>test/experience/update';
			 defaultType(row.questionType) ;
			 
			 //解除绑定题号验证--因为是只读的
			 $("#questionNum").parent().find("span .textbox-text").unbind('keyup'); 
			 $("#errtip").html("");
			 flag = true ;
		 }
	}
	var flag = true;
	//添加或修改题库
	function saveOrUpdateQBank(){
		
	   $('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate') && flag && checkIndexIsEmpty();
			},
			success : function(result) {
				 
				if (result==0) {
					$.messager.show({
						title : 'Error',
						msg : '服务器出错，请稍后再试'
					});
				} else {
					$('#dlg').dialog('close'); // close the dialog
					$('#tt').datagrid('reload'); // reload the user data
				}
			}
		});
	}
	
	function checkIndexIsEmpty(){
		var f = true ;
		$("input[temp]").each(function(){
			if($(this).val().length==0){
				alert('资源索引不能为空') ;
				f = false;
				return f;
			}
		});
		return f ;
	}
	
	function checkQnumIsExist(qnum){
		 
		if(qnum.length>0){
			$.ajax({
				type: 'get'  ,
				url : '<%=basePath%>test/experience/checkQnumIsExist' ,
				data: 'qnum='+qnum ,
				success:function(rs){
					if(rs==1){
						$("#errtip").html("<font color='red'>&nbsp;&nbsp;该题号已经存在!</font>");
						flag = false ;
					}else{
						$("#errtip").html("");
						flag = true;
					}
				}
			});
		}
		
	}
	
	 
</script>
</html>